import { Card, Row, Col, Table } from 'antd';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { useEffect, useState } from 'react';

export const Traffic = () => {
  const [trafficData, setTrafficData] = useState<any[]>([]);
  const [topUsers, setTopUsers] = useState<any[]>([]);

  useEffect(() => {
    // Mock data - replace with real API calls
    const mockData = Array.from({ length: 24 }, (_, i) => ({
      time: `${i}:00`,
      upload: Math.random() * 1000,
      download: Math.random() * 2000,
    }));
    setTrafficData(mockData);

    const mockUsers = [
      { username: 'user1', upload: 5.2, download: 15.8, total: 21.0 },
      { username: 'user2', upload: 3.1, download: 9.5, total: 12.6 },
      { username: 'user3', upload: 2.8, download: 7.2, total: 10.0 },
    ];
    setTopUsers(mockUsers);
  }, []);

  const columns = [
    { title: 'Username', dataIndex: 'username', key: 'username' },
    { title: 'Upload (GB)', dataIndex: 'upload', key: 'upload', render: (val: number) => val.toFixed(2) },
    { title: 'Download (GB)', dataIndex: 'download', key: 'download', render: (val: number) => val.toFixed(2) },
    { title: 'Total (GB)', dataIndex: 'total', key: 'total', render: (val: number) => val.toFixed(2) },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '24px' }}>Traffic Statistics</h1>

      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card title="Traffic Trend (Last 24 Hours)">
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={trafficData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="upload" stroke="#8884d8" name="Upload (MB/h)" />
                <Line type="monotone" dataKey="download" stroke="#82ca9d" name="Download (MB/h)" />
              </LineChart>
            </ResponsiveContainer>
          </Card>
        </Col>

        <Col span={24}>
          <Card title="Top Users by Traffic">
            <Table dataSource={topUsers} columns={columns} pagination={false} rowKey="username" />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
